<template>
  <a-modal :open="open" width="950px" title="动态查询" centered ok-text="确定" destroy-on-close @ok="onCancel" @cancel="onCancel">
    <div class="">
      <div class="flex justify-start items-center">
        <a-descriptions class="ml-1" :column="4">
          <a-descriptions-item label="设备序列号"> {{ rowData?.equipmentNumber || '-' }}</a-descriptions-item>
          <a-descriptions-item label="设备名称">
            <MedicineInfo :value="{ mc: rowData?.equipmentName, gg: rowData?.unit, cj: rowData?.manufacturer }" />
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <div class="flex justify-between items-center">
        <div class="pt-2">
          <a-form :model="formState" class="form-style-flex" :label-col="{ style: { width: '70px' } }">
            <a-form-item name="dateRange" label="操作时间" class="w-80">
              <a-range-picker v-model:value="formState.dateRange" format="YYYY-MM-DD" :allow-clear="false" value-format="YYYY-MM-DD" @change="data" />
            </a-form-item>
            <a-form-item name="operateType" label="操作类别" class="w-80 ml-4">
              <a-select v-model:value="formState.operateType" placeholder="请选择">
                <a-select-option value="1">装备配置</a-select-option>
                <a-select-option value="2">装备借用</a-select-option>
                <a-select-option value="3">装备使用</a-select-option>
                <a-select-option value="4">装备报修</a-select-option>
                <a-select-option value="5">装备维修</a-select-option>
                <a-select-option value="6">装备故障事故</a-select-option>
                <a-select-option value="7">装备调入</a-select-option>
                <a-select-option value="8">装备调出</a-select-option>
                <a-select-option value="9">装备保养</a-select-option>
                <a-select-option value="10">装备报废</a-select-option>
              </a-select>
            </a-form-item>
          </a-form>
        </div>
        <div>
          <a-button @click="formState = {}">重置</a-button>
          <a-button class="ml-2" type="primary" @click="getData">搜索</a-button>
        </div>
      </div>

      <BaseTable :data-source="tableData" :loading="loading" column-code="000588" :pagination="pagination" height="400">
        <template #bodyCell="{ column, index, record }">
          <template v-if="column.dataIndex === 'NO'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'operateType'">
            {{ statusEnum(record?.operateType) }}
            <!-- {{ statusEnum[Number(record?.operateType)].text }} -->
          </template>
        </template>
      </BaseTable>
    </div>
  </a-modal>
</template>
<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'

const emit = defineEmits(['update:open', 'success'])
const statusEnum = (ind) => {
  const funm = [
    { text: '' },
    { text: '装备配置' },
    { text: '装备借用' },
    { text: '装备使用' },
    { text: '装备报修' },
    { text: '装备维修' },
    { text: '装备故障事故' },
    { text: '装备调入' },
    { text: '装备调出' },
    { text: '装备保养' },
    { text: '装备报废' }
  ]
  return ind ? funm[ind].text : ind
}
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => ({})
  }
})

const formState = ref({
  dateRange: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
})

const { loading, tableData, getData, pagination } = useTable({
  url: '/war/equipmentDistribution/getEquipmentHistoryList',
  immediate: true,
  formatParams: () => {
    return {
      equipmentNumber: props.rowData?.equipmentNumber,
      startTime: formState.value.dateRange?.[0],
      endTime: formState.value.dateRange?.[1],
      ...formState.value
    }
  }
})

watch(
  () => props.open,
  (val) => {
    if (val) {
      getData()
    }
  }
)

const onCancel = () => {
  emit('update:open', false)
}
</script>
<style lang="less" scoped></style>
